<template>
  <div :bordered='false'>
    <f-table ref='bankTable' rowKey='bankId' :columns='columns' :operator='operator' :params='queryParam' :api='api.salemanBank' :autoLoad='false' :showPagination='false' :multiple='false'>
         <span slot='bankState' slot-scope='text, record, index'>
          <a-switch v-model='record.bankState==1' checkedChildren='启用' unCheckedChildren='禁用' @change='(checked) => setBankState(checked,record)' />
        </span>
      <span slot='action' slot-scope='text,record'>
          <template>
            <a @click='editBank(record)'>编辑</a>
            <a-divider type='vertical' />
          </template>
          <a-dropdown>
            <a class='ant-dropdown-link'>更多 <a-icon type='down' /></a>
            <a-menu slot='overlay'>
              <a-menu-item v-if="$auth('table.delete')">
                <a href='javascript:;' @click='$refs.bankTable.del(record)'>删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
    </f-table>
    <a-modal title='添加银行账户' :visible='bankModal' width='600px' @cancel='handleCancel' @ok='handleSubmit'>
      <f-form ref='form' :action='api.salemanBank' :form-key='this.formItem.bankId'>
        <f-form-item label='银行名称' name='bankName' :required='true' :value='formItem.bankName' />
        <f-form-item label='银行卡号' name='bankNo' :required='true' :value='formItem.bankNo' />
        <f-form-item label='收款人姓名' name='saleManName' :required='true' :value='formItem.saleManName' />
        <f-form-item label='备注' name='remark' :value='formItem.remark' />
      </f-form>
    </a-modal>
  </div>
</template>

<script>
import api from "../js/api"

export default {
  name: "saleManBank",
  components: {},
  data() {
    let me = this
    //操作按钮
    let operator = []
    operator.push({
      name: "添加",
      icon: "plus",
      that: this,
      handler: (table) => {
        this.bankModal = true
      }
    })
    return {
      api: Object.assign(api, this.api),
      //列表初始化查询参数
      queryParam: {},
      bankModal: false,
      formItem: {
        bankId: "",
        bankName: "",
        saleManName: "",
        bankNo: "",
        remark: ""
      },
      // 表头
      columns: [
        {
          title: "序号",
          width: "60",
          align: "center",
          customRender: (text, record, index) => index + 1
        },
        {
          title: "银行名称",
          align: "center",
          dataIndex: "bankName"
        },
        {
          title: "卡号",
          align: "center",
          dataIndex: "bankNo"
        },
        {
          title: "收款人",
          align: "center",
          dataIndex: "saleManName"
        },
        {
          title: "状态",
          align: "center",
          dataIndex: "bankState",
          scopedSlots: { customRender: "bankState" }
        },
        {
          title: "备注",
          align: "center",
          dataIndex: "remark"
        },
        {
          title: "操作",
          align: "center",
          dataIndex: "action",
          scopedSlots: { customRender: "action" }
        }
      ],
      operator: operator
    }
  },
  created() {
  },
  methods: {
    setData(data) {
      if (data && data.saleManId) {
        this.queryParam.saleManId = data.saleManId
        this.formItem.saleManName = data.saleManName
        this.$refs["bankTable"].refresh(false)
      }
    },
    //设置状态
    setBankState(check, record) {
      this.http.post(this, {
        url: this.api.salemanBank.setBankState,
        data: {
          ids: record.bankId,
          bankState: Number(check)
        },
        success(me, data) {
          record.bankState = data
        }
      })
    },
    editBank(bank) {
      this.formItem = bank
      this.bankModal = true
    },
    handleSubmit() {
      this.$refs.form.submit({ saleManId: this.queryParam.saleManId }, this.handleCancel)
    },
    handleCancel() {
      this.bankModal = false
    }
  }
}
</script>